<template>
  <div class="config-main">
    <el-form ref="form" :model="form">
      <el-form-item label="应用名称">
        <el-input v-model="form.AppName" style="width: auto" />
      </el-form-item>
      <el-form-item label="应用描述">
        <el-input v-model="form.AppDescription" type="textarea" style="height: auto" />
      </el-form-item>
      <el-row>
        <el-table
          :data="taskList"
          :stripe="true"
          element-loading-text="Loading"
          :border="false"
          :header-cell-style="{color:'black'}"
          fit
          highlight-current-row
        >
          <el-table-column
            :label="'任务编号'"
            align="center"
            min-width="15%"
          >
            <template v-slot="scope">
              Task {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column
            :label="'任务描述'"
            align="left"
          >
            <template v-slot="scope">
              <el-input v-model="scope.row.task" />
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('operation')"
            align="center"
            width="119px"
            fixed="right"
          >
            <template v-slot="scope">
              <a href="javascript:void(0)" class="font-blue" @click="toDelete(scope.$index)">{{ $t('delete') }}</a>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-form-item style="margin-top: 25px">
        <el-button type="primary" @click="toInsert">添加任务</el-button>
        <el-button type="primary" @click="onSubmit">提交修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    appName: {
      type: String,
      require: true,
      default: ''
    },
    appDescription: {
      type: String,
      require: true,
      default: ''
    },
    // eslint-disable-next-line vue/require-default-prop
    taskList: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      form: {
        AppName: '',
        AppDescription: ''
      }
    }
  },
  created() {
    this.form.AppDescription = this.appDescription
    this.form.AppName = this.appName
  },
  methods: {
    toDelete(id) {
      this.taskList.splice(id, 1)
    },
    toInsert() {
      this.taskList.push({
        taskDescription: ''
      })
    },
    onSubmit() {
      this.$message({
        message: 'submit!',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>

</style>
